표 위젯

경로: 위젯 갤러리> 기본> 표

이 위젯을 사용해 데이터 소스에서 제공된 데이터로 표를 만듭니다.

표를 구성하는 방법:

  1. 표 위젯을 화면에 놓고 표 템플릿을 구성합니다.
  2. 위젯을 셀 안에 추가하여 데이터 소스에서 제공된 데이터로 표를 채울 때 행 템플릿으로 사용될 행을 하나 이상 구성합니다.
  3. 표의 행을 채우기 위해 사용될 데이터 소스를 선택합니다
  4. 위젯과 데이터 소스의 링크를 규정합니다.
표 위젯 구성하기

표 위젯의 두 상태:

표를 클릭하면 보기 모드에서 위젯을 관리하게 되고 더블클릭하면 편집 모드에 들어갑니다. 나가서 보기 모드로 돌아가려면 표 바깥에서 클릭합니다.

보기 모드

보기 모드에서는 표 레이아웃을 구성할 수 있습니다. 표를 끌어 페이지에 놓고 표 크기를 조정하며, 템플릿 행의 수, 열의 수 및 기본 표 특성을 규정합니다.

편집 모드

편집 모드에서는 표의 형식과 각 셀의 내용을 구성할 수 있습니다. 표의 각 열은 열 템플릿으로 작용할 것입니다.

표의 모양을 구성하려면 표의 실렉터를 클릭하여 구성할 항목을 선택합니다.

행 또는 컬럼을 추가하거나 삭제하기

행 또는 컬럼을 추가하거나 삭제하려면 그리드를 더블 클릭하여 편집 모드로 들어간 다음, 컬럼 또는 행 셀렉터를 오른쪽 클릭하여 상황별 메뉴를 엽니다.

행 또는 컬럼을 병합하거나 분할하기

행 또는 컬럼을 병합하거나 분할하려면 그리드를 더블 클릭하여 편집 모드로 들어간 다음, 커서를 리본으로 이동시킵니다:

 

셀의 내용을 구성하려면 위젯을 끌어 셀 내부에 놓습니다.

단일 셀 내부에 더 많은 위젯이 필요한 경우에는 위젯 그룹을 만들어 페이지로부터 셀로 복사합니다.

데이터 소스 구성하기

표를 채울 데이터를 제공하는 데이터 소스는 표 데이터 소스 위젯 또는 JavaScript 개체일 수 있습니다.

표 데이터 소스 위젯

경로: 위젯 갤러리> 기본> 표

  1. 표 데이터 소스 위젯을 끌어 페이지에 놓습니다
  2. 표 모델 파라미터를 데이터 소스의 링크에 설정합니다.

데이터 소스를 선택하고 TableDataSrcWgt 에디터 내부에 필요한 행과 열을 추가합니다. 다음 예에서는 두 행 템플릿을 규정하였습니다:

각 행에 행 타입을 지정해야 합니다. 행은 해당 행 템플릿의 형식을 취할 것입니다. 행 템플릿의 각 셀에 놓인 위젯이 해당 타입의 행에 나타날 것입니다.

데이터 소스의 링크를 규정

  1. 표 위젯을 더블클릭하여 편집 모드에 들어가 위젯을 선택합니다
  2. 데이터 소스에서 읽을 특성을 선택합니다
  3. 데이터를 제공할 데이터 소스의 열을 선택합니다

아래 그림은 우리의 예가 런타임에서 어떻게 렌더링될지를 보여줍니다

고정 표제

첫 번째 행이 스크롤될 수 없게 하려면 데이터 소스 툴박스의 "고정 표제 체크박스를 체크하거나 데이터 소스 특성 패널 내부의 "표제 표시" 특성을 참으로 설정합니다(이 파라미터는 고급 보기에서만 사용할 수 있습니다).

열 오버라이드

정수 배열을 사용해 런타임에서 열 순서를 규정하거나 또는 수정할 수 있습니다. 이 특성을 사용할 때는 정수 배열을 첨부하고 지수를 -1로 설정하십시오(전체 배열을 선택하기 위해).

가져오기 모드

활성화하면 표가 화면을 채울 최소 숫자의 행을 로드합니다. 큰 표를 포함한 페이지를 빠르게 로딩할 수 있습니다. 스크롤 시, 표가 끝부분에 도달할 때 새 행이 로드되어 데이터 베이스 전체를 스크롤 할 수 있습니다.

"로드된 행" 매개변수를 사용하면 주기당 로드해야 하는 행 수를 선택할 수 있습니다. 값이 클수록 페이지 로드에 더 많은 시간이 걸리지만, 더 많은 행이 로드되어 스크롤 할 수 있습니다(스크롤 시 로드하는 양이 더 적음).

다중 언어

다언어 지원을 가능하게 하려면 열의 다언어 아이콘을 마우스 오른쪽 버튼으로 클릭합니다. 아이콘 색이 바뀌어 지원이 가능하게 되었음을 표시합니다.

필요하지 않을 때는 더 나은 성능을 위해 다언어 지원 활성화를 하지 마십시오.

데이터 소스 가져오기/내보내기

xml 파일을 사용해 데이터 소스 구성을 가져오기/내보내기 할 수 있습니다

JavaScript 개체

데이터 소스 위젯 대신에 데이터를 채울 표를 JavaScript 개체로부터 제공할 수 있습니다. 이 경우에는 요소 배열을 사용할 데이터로 채우고 배열을 표 위젯에 지정해야 합니다.

var myTable = page.getWidget("TableWgt1");
myTable.model = model;

모델은 표 정의 및 데이터로 된 요소들의 배열입니다. 배열의 첫 번째 요소는 행 템플릿을 포함하고 다른 요소들은 표 행에 채울 데이터를 포함할 것입니다

model[0] = row_templates;    // row templates   
model[1] = row_data1;        // data of the row1
model[2] = row_data2;        // data of the row2
model[3] = row_data3;        // data of the row3
model[4] = row_data4;        // data of the row4
model[5] = row_data4;        // data of the row5

행 템플릿은 다차원 배열로서 각 배열은 한 템플릿 행의 데이터 링크를 규정합니다.

아래 예에서는 두 행을 위한 템플릿이 있습니다.

var row_templates = {
    _h : [
            [ []       , []        ],   //rowType = 0
            [ ["text"] , ["value"] ]    //rowType = 1
         ]
}

첫 번째 행의 두 열에는 데이터 링크가 없습니다. 표의 첫 번째 행에 대한 표제를 위해 이 템플릿을 사용합니다.

두 번째 행은 위젯의 “텍스트” 특성으로 한 행의 템플릿을 첫 번째 열 안에 규정하고 위젯의 “값” 특성을 두 번째 열 안으로 규정합니다. 이들은 모델 변수 내부에 제공된 데이터를 사용해 동적으로 채워질 것입니다.

아래 예에서는 데이터 행을 규정합니다

var row_data = {
    _t : 1,
    _v : ["Temperature:", { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }]
}

첫 번째 요소는 사용할 행 템플릿이고 두 번째 요소는 사용할데이터 배열입니다. 이 예에서 “온도:”는 첫 번째 열 위젯 내부에 사용할 텍스트이고 다른 요소는 두 번째 열에 위젯 값 특성을 채울 값을 제공할 데이터 링크입니다.

데이터 링크 요소:

파라미터 설명
_c : "dl"
  • 요소를 데이터 링크로서 식별합니다
    		•
    s : "_TagMgr"
  • 데이터 소스가 태크 관리자임을 지정합니다
    		•
    a : "Tag1", i: 0, m:2

    태그 명칭과 지수를 지정하고(태그가 배열일 때 필요) 읽기/쓰기 모드를 지정합니다

    • m=0는 읽기만임
    • m=1은 쓰기만임
    • m=2는 읽기/쓰기임

    아래의 JavaScript 코드는 표 데이터 소스 위젯을 사용하여 이전 예의 같은 표를 생성할 것입니다

    var model = [];

var row_templates = {
    _h : [
            [ []       , []        ],   //rowType = 0
            [ ["text"] , ["value"] ]    //rowType = 1
         ]  
}

var row_data1 = {
    _t : 0,
    _v : [],
    _h : true
}

var row_data2 = {
    _t : 1,
    _v : ["Temperature:", { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }]
}

var row_data3 = {
    _t : 1,
    _v : ["Humidity:",    { _c : "dl" , s : "_TagMgr", a : "Tag2", i: 0, m : 2 }]
}

var row_data4 = {
    _t : 1,
    _v : ["Noise:",       { _c : "dl" , s : "_TagMgr", a : "Tag3", i: 0, m : 2 }]
}

var row_data5 = {
    _t : 1,
    _v : ["Brightness:",  { _c : "dl" , s : "_TagMgr", a : "Tag4", i: 0, m : 2 }]
}

model[0] = row_templates;
model[1] = row_data1;
model[2] = row_data2;
model[3] = row_data3;
model[4] = row_data4;
model[5] = row_data5;

var myTable = page.getWidget("TableWgt1");
myTable.model = model;

    첫 번째 행(row_data1)은 스크롤될 수 없도록 하기 위해 지침 _h: true를 포함합니다.

    var row_data1 = {
    _t : 0,
    _v : [],
    _h : true
}

    다중 언어

    다언어 텍스트는 아래 요소를 사용해 입력할 수 있습니다:

    { _c : "ml" , mltext : {"en-US" : "Temperature:" , "it-IT" : "Temperatura:"} }
    파라미터 설명
    _c : "ml"
  • 다언어 텍스트로서의 요소를 식별합니다
    		•
    mltext : { ... }

    커플 리스트: "ID Language":"Text"

    예:

    • "en-US" : 온도
    • "it-IT" : "Temperatura:"

    예:

    var row_data2 = {
    _t : 1,
    _v : [ { _c : "ml" , mltext : { "en-US" : "Temperature:", 
                                    "it-IT" : "Temperatura:"}   }, 
           { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }
         ]
}
    행 배경색

    행 배경색 파라미터를 사용해 관련 행의 배경색을 포함할 데이터 소스 위젯의 열을 규정할 수 있습니다.

    표의 행의 배경색을 구성하는 방법:

    1. 각 행의 배경색을 포함하기 위해 데이터 소스 위젯 내부에 새 열을 추가합니다
    2. 표의 “행 배경색” 파라미터가 데이터 소스 위젯의 컬러 열을 가리키도록 구성합니다.

    표 필터

    “표 필터” 특성을 사용해 표 내부에 보일 수 있는 내용을 필터링할 수 있습니다. 데이터 링크에서 식을 사용해 데이터를 필터링하기 위해 사용할 기준을 규정할 수 있습니다(상세 설명은 페이지 1의 "수식" 장 참조).

    표의 각 행은 표 필터의 데이터 링크가 참 값을 반환할 때만 보일 것입니다.

    예 1

    설명 열 내부에 “something”이 포함된 행만 보기 원하는 경우, 아래 공식을 사용하면 됩니다:

    =$Contains($('Description:TableDataSrcWgt'),$('value:SearchOnTable'))

    여기서:

    예 2

    플래그를 사용해 표 내부에 노출할 파라미터를 규정하는 방법:

    먼저 관련 행을 가능하게 할 플래그를 포함할 새 열을 데이터 소스 내부에 추가합니다. 그다음에 표 필터의 데이터 링크를 플래그가 들어있는 새 열에 링크합니다.

    표 정렬

    표의 행들을 정렬하려면 표를 정렬하기 위해 사용하기 원하는 데이터 소스의 열을 선택합니다.

    열이 반복되는 경우 다중 정렬(STABLE 정렬)이 유용합니다. 최대 3개의 정렬 열을 사용할 수 있습니다.

    SetTableSortingColumn 매크로를 사용해서도 표를 정렬할 수 있습니다(상세 설명은 페이지 1의 "표 정렬 열 설정" 참조).

    수평 스크롤 자세

    “수평 스크롤 자세”는 두 표의 수평 스크롤 이동의 동기화를 유지할 수 있게 합니다.

    수평 스크롤 자세 파라미터는 고급 특성 보기 모드에서만 사용할 수 있습니다

    페이지 사전 캐싱

    일반적으로 JMobile HMI Runtime는 디스플레이에 보일 데이터만 가져옵니다. 표 스크롤링을 더욱 즐겁게 만들려면 표시되는 행의 다음 및 이전 행의 데이터를 사전에 로드하는 것이 유용할 수 있습니다. 페이지 사전 캐싱 파라미터를 사용하여 얼마나 많은 페이지를 사전 로드할 것인지를 규정할 수 있습니다.

    예:

    행이 4개인 표와 페이지 사전 캐싱 = 2를 사용

    페이지 사전 캐싱 파라미터는 고급 특성 보기 모드에서만 사용할 수 있습니다

     

    표가 포함된 위젯

    갤러리 내부에 예컨대 추세 표, 감사 표 등의 표가 포함된 위젯이 있습니다. 표의 특성 또는 데이터 소스의 특성을 열기 위해 개체 보기 탭을 사용하여 구성할 필요가 있는 요소를 선택할 수 있습니다.

    표 인쇄

    표 위젯을 보고서 인쇄 갤러리에서 찾아 사용할 수 있습니다.